<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  
<div id="app">

<aki :data="fruits1" >
    <template #default="res">
        {{res.item}}
    </template>
</aki>

<aki :data="fruits2">
    <template #default="res">
        {{res.item.id}}--{{res.item.name}}
    </template>
</aki>




</div>
  
<script>
    
const app = Vue.createApp({
     data(){
        return{
        fruits1: ['苹果','桔子','香蕉'],
        fruits2: [
            {id: 1, name: '苹果'},
            {id: 2, name: '桔子'},
            {id: 3, name: '香蕉'},
        ],
        }
    },
});

app.component('Aki', {
   props:['data'],
    template: `
   <ul>
        <li v-for="item in data">
            <slot v-bind="{item}"></slot>    
        </li>
    </ul>
    `,
})
app.mount('#app');

</script>
</body>
</html>